<script setup>
import {reactive, ref} from "vue";

let myStyle1 = reactive({
  backgroundColor:"red",
  fontSize:"16px",
})

let bgc = ref("red")
let fs = ref(16)

let myStyle2 = reactive({
  backgroundColor:bgc,
  fontSize: fs.value + "px",
})

</script>

<template>
  <!-- 传统写法，不绑定 -->
  <h1 style="background-color: red; font-size: 16px">Hello, World!</h1>
  <!-- 动态绑定内联样式——对象语法 -->
  <h1 v-bind:style="myStyle1">Hello, World!</h1>
  <h1 v-bind:style="myStyle2">Hello, World!</h1>
</template>

<style scoped>

</style>